<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-11-29 09:50:03
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-01-11 16:44:28
 * @FilePath: \partal\src\views\develop\components\ContributeH5.vue
 * @Description: 贡献指南-H5端
-->

<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  import { PAGE_DEVELOP_THEME } from '@/enum/pageEnum'
  import { getContribute } from '@/config/contribute'
  import { usePlant } from '@/stores/plant'

  const router = useRouter()
  const plant = usePlant()
  const contributes = getContribute(plant.plantType)

  /**
   * 路由跳转：定制主题
   */
  const goDevelopTheme = () => router.push({ path: PAGE_DEVELOP_THEME })
</script>

<template>
  <div class="h5">
    <p class="p14">SSC+ Design Mobile</p>
    <p class="p36 mt18">贡献指南</p>
    <p class="p14 mt12">本篇指南会指导您如何为 SSC+ Design Mobile 贡献一份自己的力量，请在您要提 issue 或者 pull request 之前花几分钟来阅读一遍这篇指南，保证贡献是符合规范并且能帮助到社区。</p>

    <p class="split mt38" />

    <p class="p24 mt46">分支管理</p>
    <p class="p14 mt18">目前 gitlab 上长期维护两个分支 dev 和 master。如果您要新增功能，请由dev分支创建feature_component_name分支，发 pull request 到 该分支；如果您要修复一个 bug，请由dev分支创建 feature_fix_name 分支，发 pull request 到 该分支。</p>
    <p class="p14 mt18">官网会同步更新 SSC+ Design Mobile 的发布周期，同时每天都会有开发者 review gitlab 中提交的代码。发版周期是每 2周/次，通常会提前合并新的代码或功能，发布正式版本。</p>
    
    <p class="split mt38" />

    <p class="p24 mt46">参与贡献</p>
    <p class="p18 mt24">Pull Request 规范</p>
    <p class="p14 mt18">1. 每个 PR 只解决单个问题或者新增单个功能。</p>
    <p class="p14 mt12">2. 当新增组件或修改原有组件时，同步更改对应的文档，保证代码的稳定。</p>
    <p class="p14 mt12">3. 组件源码 index.vue &lt;template&gt; 最外层需包裹 &lt;div class="sscd-组件名"&gt; ... &lt;/div&gt;</p>
    <pre class="code mt12">
&lt;template&gt;
  &lt;div class="sscd-popup"&gt;
    ...
  &lt;/div&gt;
&lt;/template&gt;
    </pre>
    <p class="p14 mt12">4. 组件源码 index.vue 务必添加文件头注释，标明作者</p>
    <pre class="code mt12">
&lt;!--
  * @Author: wenbao wenbao@ssc-hn.com
  * @Date: 2023-12-04 15:44:07
  * @LastEditors: wenbao wenbao@ssc-hn.com
  * @LastEditTime: 2023-12-12 17:22:46
  * @FilePath: \h5-components\packages\divider\src\index.vue
  * @Description: 分割线 Divider
--&gt;
    </pre>
    <p class="p14 mt12">5. 组件源码index.vue中的注释 @doc 可以自动翻译成api文档，还可以编写 README.md 对 api文档 进行拓展翻译。</p>
    <p class="p14 mt12">6. 组件源码index.vue中若使用颜色、字体等，请使用 theme.less / themeEnum.ts 中的变量，遵循<span class="blue" @click="goDevelopTheme()">主题定制标准</span>。</p>
    <p class="p14 mt12">7. 组件示例demo.vue中若使用颜色、字体等，请直接使用自定义变量即可。</p>
    <p class="p14 mt12">8. 请在贡献代码前先阅读仓库工程中的 README.md 文档（重要）。</p>

    <p class="p18 mt24">Pull Request 流程</p>
    <p class="p14 mt18">1. fork 主仓库，并同步主仓库的最新代码。</p>
    <p class="p14 mt12">2. 将项目下载到本地，在项目根目录下运行 pnpm install，并在本地能正常访问</p>
    <pre class="code mt12">
git clone https://gitlab.ssc-hn.com/ssc-fe/ssc-ui/h5/h5-components.git
pnpm install
npm run dev
    </pre>
    <p class="p14 mt18">3. 创建一个新的分支并在对应分支上进行开发</p>
    <pre class="code mt12">
git checkout -b feature_component_name
git checkout feature_component_name
    </pre>
    <p class="p14 mt18">4. 如开发涉及新组件或组件的新特性，需要完善组件对应的文档。</p>
    <p class="p14 mt18">5. 保证编译功能正常使用</p>
    <pre class="code mt12">
npm run build:dev
    </pre>
    <p class="p14 mt18">6. 开发完成后提交到仓库的对应分支上，PR 会在 Review 通过后被合并到主仓库，然后等待 SSC+ Design Mobile 发布新版本（每2周一次）。</p>

    <p class="split mt38" />
    
    <p class="p24 mt46">组件发布</p>
    <p class="p14 mt18">在被授予组件库发布 npm私服 权限后，开发者可以自行发布组件，流程如下：</p>
    <p class="p14 mt18">1. 注册用户</p>
    <pre class="code mt12">
<p class="gray"># 发起飞书工单，向运维同事申请 账号、密码</p>npm adduser --registry=https://nexus.ssc-hn.com/repository/jgpt-npm/
    </pre>
    <p class="p14 mt18">2. 发布组件</p>
    <pre class="code mt12">
<p class="gray"># 批量发布</p>pnpm -r publish

<p class="gray"># 单个发布</p>pnpm --filter popup publish
    </pre>
    <p class="p14 mt12">注：npm组件 无法更新，只能新增，请手工修改组件的版本号（package.json 版本号），并保证版本号大于 npm私服 组件的版本号</p>
    <p class="p14 mt18">3. nexus私服平台</p>
    <p class="p14 mt8">
      <a href="https://nexus.ssc-hn.com/#browse/browse:jgpt-npm:%40sscd-mobile" target="_blank">
        https://nexus.ssc-hn.com/#browse/browse:jgpt-npm:%40sscd-mobile
      </a>
    </p>

    <p class="split mt38" />

    <p class="p24 mt46">贡献</p>
    <p class="p14 mt18">感谢以下所有给 SSC+ Design Mobile 贡献过代码的开发者：</p>
    <div class="contribute mt24">
      <div class="contribute-item" v-for="(item, i) in contributes" :key="`contribute-item${i}`">
        <img class="contribute-item-avatar" :src="item.avatar" />
        <span class="contribute-item-name">{{ item.name }}</span>
        <span class="contribute-item-dept">{{ item.dept }}</span>
      </div>
    </div>
  </div>
</template>

<style type="less" scoped>
  .h5 {
    width: 988px;
    margin: auto;
    padding-bottom: 108px;
    .blue {
      color: #1677FF;
      cursor: pointer;
    }
    .contribute {
      display: flex;
      flex-wrap: wrap;
      > .contribute-item {
        position: relative;
        width: 180px;
        height: 56px;
        margin-bottom: 24px;
        > .contribute-item-avatar {
          position: absolute;
          top: 0;
          left: 0;
          width: 56px;
          height: 56px;
          object-fit: cover;
          border-radius: 50%;
        }
        > .contribute-item-name {
          position: absolute;
          top: 2px;
          left: 68px;
          height: 24px;
          line-height: 24px;
          font-size: 16px;
          color: #1D2129;
        }
        > .contribute-item-dept {
          position: absolute;
          top: 34px;
          left: 60px;
          padding: 0 8px;
          height: 20px;
          line-height: 20px;
          border-radius: 10px;
          font-size: 12px;
          color: #595959;
          background: #F2F3F5;
        }
      }
    }
  }
</style>
